import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Button, Icon } from 'antd'
import styles from './List.less'
import classnames from 'classnames'
import { AnimTableBody } from '../../components'
import { DropOption } from '../../components'

const confirm = Modal.confirm




class list extends React.Component {
  state = {
    selectedRowKeys: [],  // Check here to configure the default column
    loadingDel: false,
  };

  constructor(props) {
        super(props);
    }


 
  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  render() {
    const {
        dataSource, pagination, isMotion,onAdd,onClose, location,loading,onPageChange,onEditItem,AmountNumber,onDelete
      } = this.props
    for(let x in AmountNumber){
        for(let i =0;i<dataSource.length;i++){
            if(x == dataSource[i].id){
                dataSource[i]["AmountNumber"] = AmountNumber[x]
            }
        }
    }
    const stutaKe=(e)=>{
      let center = ''
      if(e==0){
        center='激活'
      }else{
        center='停用'
      }
      return center
    }
    const columns = [
      {
        title: '用户名',
        dataIndex: 'name',
        key: 'name',
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render:(text) => <span>{ stutaKe(text) }</span>
      },{
        title: '用户数量',
        dataIndex: 'AmountNumber',
        key: 'AmountNumber',
      }, {
        title: '操作',
        key: 'operation',
        width: 100,
        render: (text, record) => {
          return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '编辑' }, { key: '2', name: '删除' }]} />
        },
      },
    ]
    const getBodyWrapperProps = {
      page: location.query.page,
      current: pagination.current,
    }
    const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }
  const onRowDoubleClick =(record)=>{
    onEditItem(record)
  }
    const handleMenuClick = (record, e) => {
      if (e.key === '1') {
        onClose(record)
      } else if (e.key === '2') {
        if(record.AmountNumber > 0){
            Modal.warning({
                title: '温馨提示',
                content: '该用户下还有管理员，不能删除',
            });
        }else{
            confirm({
                title: '您确定要删除这条记录吗?',
                onOk () {
                    onDelete(record.id)
                },
            })
        }
        
      }
    }

    return (
      <div>
      <div className={styles.filterTop}>
        <div className={styles.title}><span style={{marginRight:20}}>全部用户</span> <Button type="primary" style={{marginBottom:5}} size="large" onClick={onAdd}  icon="plus">添加用户</Button></div>
        <div className={styles.Searchright}>
        </div>
      </div>
      <div className={styles.listbox}>
        <div>
          <Table
            className={styles.table}
            bordered
            scroll={{ x: 750, y:600 }}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            onChange={onPageChange}
            pagination={pagination}
            onRowDoubleClick={onRowDoubleClick}
            simple
            rowKey={record => record.id}
            getBodyWrapper={getBodyWrapper}
          />
        </div>
      </div>
      </div>
    );
  }
}

list.propTypes = {
  loading: PropTypes.bool,
  dataSource: PropTypes.array,
  pagination: PropTypes.object,
  onPageChange: PropTypes.func,
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default list
